<html>
<head>

    <title> Sunny Trends </title>
    <link href="stylesheets/main.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="./static/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="./static/highcharts.js"></script>
    <!--[if IE]>
       <script type="text/javascript" src="./static/excanvas.compiled.js"></script>
    <![endif]-->
    <script type="text/javascript" src="./static/jquery.newwin.1.1.js"></script>

    <script type="text/javascript">
    var chart;
    $(document).ready(function(){
        $("#TXT_FT").hide();
        $("#TXT_PR").hide();
        $("#TXT_WTF").hide();
        $("#GMS").hide();
        $('#TXT a').newWin();
        chart = new Highcharts.Chart({
            chart: {
                  renderTo: 'container',
                  margin: [80, 60, 60, 60],
                  zoomType: 'xy'
               },
               title: {
                  text: 'Sunny Trends',
                  style: {
                     margin: '10px 0 0 0' // center it
                  }
               },
               subtitle: {
                  text: 'Sources: Weather.com, Yahoo! Finance',
                  style: {
                     margin: '0 0 0 0' // center it
                  }
               },
               xAxis: [{
                  categories: [{% for m_date in date_list reversed %}{% if forloop.last %}'{{m_date}}'{%else%}'{{m_date}}',{% endif %}{% endfor %}]
               }],
               yAxis: [
               { // high yAxis
					labels: {formatter: function() {return '';}},
					title: {text: ''}
			   },
			   { // Dowjones yAxis
					labels: {formatter: function() {return '';}},
					title: {text: ''}
			   },
			   { // Bovespa yAxis
					labels: {formatter: function() {return '';}},
					title: {text: ''}
			   },
			   { // Nasdaq yAxis
					labels: {formatter: function() {return '';}},
					title: {text: ''}
			   },
			   { // Dollar yAxis
					labels: {formatter: function() {return '';}},
					title: {text: ''}
			   },
			   { // PETR4 yAxis
					labels: {formatter: function() {return '';}},
					title: {text: ''}
			   }
			],
               tooltip: {
                  formatter: function() {
                     var unit = {
                        'São Paulo\'s High Forecast': '°C',
                        'Dow Jones': '',
                        'Bovespa': '',
                        'Nasdaq': '',
                        'USD/BRL': '',
                        'PETR4': 'Reais'
                     }[this.series.name];
                     
                     return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +' '+ unit;
                  }
               },
               legend: {
                  layout: 'vertical',
                  style: {
                     left: '60px',
                     bottom: 'auto',
                     right: 'auto',
                     top: '40px'
                  },
                  backgroundColor: '#FFFFFF'
               },
               series: [{
                  name: 'São Paulo\'s High Forecast',
                  color: '#4572A7',
                  type: 'column',
                  data: [{% for m_max_sp in max_sp_list reversed %}{% if forloop.last %}{{m_max_sp}}{%else%}{{m_max_sp}},{% endif %}{% endfor %}]      
               
               }, {
                  name: 'Dow Jones',
                  type: 'spline',
                  color: '#AA4643',
                  yAxis: 1,
                  data: [{%for m_dow_jones in dow_jones_list reversed%}{% if forloop.last %}{{m_dow_jones}}{%else%}{{m_dow_jones}},{% endif %}{% endfor %}]
               
               }, {
                  name: 'Bovespa',
                  color: '#89A54E',
                  type: 'spline',
                  yAxis: 2,
                  data: [{% for m_bovespa in bovespa_list reversed %}{% if forloop.last %}{{m_bovespa}}{%else%}{{m_bovespa}},{% endif %}{% endfor %}]
               }, {
                  name: 'Nasdaq',
                  color: '#FCBA08',
                  type: 'spline',
                  yAxis: 3,
                  data: [{% for m_nasdaq in nasdaq_list reversed %}{% if forloop.last %}{{m_nasdaq}}{%else%}{{m_nasdaq}},{% endif %}{% endfor %}]
               }, {
                  name: 'USD/BRL',
                  color: '#BB07FC',
                  type: 'spline',
                  yAxis: 4,
                  data: [{% for m_dollar in dollar_list reversed %}{% if forloop.last %}{{m_dollar}}{%else%}{{m_dollar}},{% endif %}{% endfor %}]
               }, {
                  name: 'PETR4',
                  color: '#4A473A',
                  type: 'spline',
                  yAxis: 5,
                  data: [{% for m_petr4 in petr4_list reversed %}{% if forloop.last %}{{m_petr4}}{%else%}{{m_petr4}},{% endif %}{% endfor %}]
               }]
            });




        
    });
    </script>

    <script type="text/javascript">
        $(function(){
            $("#FTB")
                .click(function(){
                    if ($('#TXT_MS').is(':visible'))
                    {
                        $("#GMS").show()
                        $('#TXT_MS').hide();
                    }
                    if ($('#TXT_PR').is(':visible'))
                    {
                        $("#GPR").show()
                        $('#TXT_PR').hide();
                    }
                    if ($('#TXT_WTF').is(':visible'))
                    {
                        $("#GWTF").show()
                        $('#TXT_WTF').hide();
                    }
                    $("#GFT").hide()
                    $("#TXT_FT").show()
                });
        });
        $(function(){
            $("#MSB")
                .click(function(){
                    if ($('#TXT_FT').is(':visible'))
                    {
                        $("#GFT").show()
                        $('#TXT_FT').hide();
                    }
                    if ($('#TXT_PR').is(':visible'))
                    {
                        $("#GPR").show()
                        $('#TXT_PR').hide();
                    }
                    if ($('#TXT_WTF').is(':visible'))
                    {
                        $("#GWTF").show()
                        $('#TXT_WTF').hide();
                    }
                    $("#GMS").hide()
                    $("#TXT_MS").show()
                });
        });
        $(function(){
            $("#PRB")
                .click(function(){
                    if ($('#TXT_MS').is(':visible'))
                    {
                        $("#GMS").show()
                        $('#TXT_MS').hide();
                    }
                    if ($('#TXT_FT').is(':visible'))
                    {
                        $("#GFT").show()
                        $('#TXT_FT').hide();
                    }
                    if ($('#TXT_WTF').is(':visible'))
                    {
                        $("#GWTF").show()
                        $('#TXT_WTF').hide();
                    }
                    $("#GPR").hide()
                    $("#TXT_PR").show()
                });
        });
        $(function(){
            $("#WTFB")
                .click(function(){
                    if ($('#TXT_MS').is(':visible'))
                    {
                        $("#GMS").show()
                        $('#TXT_MS').hide();
                    }
                    if ($('#TXT_PR').is(':visible'))
                    {
                        $("#GPR").show()
                        $('#TXT_PR').hide();
                    }
                    if ($('#TXT_FT').is(':visible'))
                    {
                        $("#GFT").show()
                        $('#TXT_FT').hide();
                    }
                    $("#GWTF").hide()
                    $("#TXT_WTF").show()
                });
        });
        $(function() {
            $("#FTB").hover(function() {
                $('#GFT').hide();
            },function() {
                if (!$('#TXT_FT').is(':visible'))
                {
                    $('#GFT').show();
                }
            });
        });
        $(function() {
            $("#PRB").hover(function() {
                $('#GPR').hide();
            },function() {
                if (!$('#TXT_PR').is(':visible'))
                {
                    $('#GPR').show();
                }
            });
        }); 
        $(function() {
            $("#MSB").hover(function() {
                $('#GMS').hide();
            },function() {
                if (!$('#TXT_MS').is(':visible'))
                {
                    $('#GMS').show();
                }
            });
        }); 
        $(function() {
            $("#WTFB").hover(function() {
                $('#GWTF').hide();
            },function() {
                if (!$('#TXT_WTF').is(':visible'))
                {
                    $('#GWTF').show();
                }
            });
        });  
    </script>

</head>
<body>
<!--[if lte IE 6]><script src="static/warning.js"></script><script>window.onload=function(){e("static/")}</script><![endif]-->
    <div id="header" align="center">
        <img src="static/logo.jpg" width="486" height="315" align="center"><br>
    </div>
    <div id="menu" align="left"> 
            <div id="FTB" style="top: 0px"> 
            <div id="FT"><img src="static/buttonFT.png" class="FT_but" /></div>
            <div id="GFT"><img src="static/GbuttonFT.png" class="FT_but" /></div>
            </div>
            <div id="MSB" style="top: 70px"> 
			<div id="MS"><img src="static/buttonMS.png" class="MS_but" /></div>
			<div id="GMS"><img src="static/GbuttonMS.png" class="MS_but" /></div> 
            </div>
            <div id="PRB" style="top: 140px"> 
			<div id="PR"><img src="static/buttonPR.png" class="PR_but" /></div> 
            <div id="GPR"><img src="static/GbuttonPR.png" class="PR_but" /></div> 
            </div>
            <div id="WTFB" style="top: 210px"> 
			<div id="WTF"><img src="static/buttonWTF.png" class="WTF_but" /></div>
			<div id="GWTF"><img src="static/GbuttonWTF.png" class="WTF_but" /></div>
			</div>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<a href='http://openshare.emotionull.com/init/default/r/6f87ffc086ad0b2cf2c8d034e75e41ee06a50f9a'><img style='border:1px solid #e3e3e3' src='http://openshare.emotionull.com/init/default/b/6f87ffc086ad0b2cf2c8d034e75e41ee06a50f9a'/></a>
	</div>
	<div id="TXT" align="center"> 
        <div id="TXT_FT"> 
        <br>
        <b>{{ date }}</b>
        <br>
        <br>
        USD-BRL exchange rate : {{ dollar|floatformat:2 }}
        <br>
        Bovespa index : {{ bovespa }}
        <br>
        Dow Jones index : {{ dowjones }} 
        <br>
        Nasdaq index : {{ nasdaq }} 
        <br>
        .......and São Paulo's high forecast: {{ max_sp }} °C
        <br>
        The highest linear sunny correlation today was between São Paulo's High Forecast and {{ max_linear_correl.0 }}
        <br>
        (<a href="http://en.wikipedia.org/wiki/Pearson_product-moment_correlation_coefficient">Pearson coefficient</a>: {{ max_linear_correl.1|floatformat:2 }})
        <br>
        The highest ranked sunny correlation today was between São Paulo's High Forecast and {{ max_rank_correl.0 }}
        <br>
        (<a href="http://en.wikipedia.org/wiki/Spearman%27s_rank_correlation_coefficient">Spearman coefficient</a>: {{ max_rank_correl.1|floatformat:2 }})
        </div>
        <div id="TXT_MS">
        <div id="container" align="center"></div>
        </div>
        
        <div id="TXT_PR">
        <br>
        Oh non, tout est résume!
        </div>
        <div id="TXT_WTF">
        <br>
        OMFG!
        <br>
        <a href="http://www.flavors.me/fabiomdiniz">About the author</a>
        <br>
        <br>
        <a href="http://code.google.com/appengine/"><img src="static/appengine.gif" alt="Powered by Google App Engine" /></a>
        <br>
        <br>
        <br>
        <a href="http://www.python.org/"><img src="static/python.png" alt="Python Powered" /></a>
        </div>
    </div>
    <div id="rightcol" align="right">
    </div>

    <script type="text/javascript">
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
        try {
        var pageTracker = _gat._getTracker("UA-15624284-1");
        pageTracker._trackPageview();
        } catch(err) {}
    </script>

</body>
</html>
